<template>
	<view class="sort">
		<view class="head">
			<span>当前排名：111名</span>
		</view>
		<view class="t_tou">
			<view class="tou_1">排名</view>
			<view class="tou_2">昵称</view>
			<view class="tou_1">分销</view>
		</view>
		<view class="t">
		  <block v-for="(item,index) of list" :key="index">
			<li class="t_01">
				<view class="t_01_3" v-if="index>2">{{item}}</view>
				<view class="t_01_1" v-if="index<3"> <img src="@/imgs/win.png"></img></view>
				<view class="t_01_2"> <img src=""></img><span>这里是昵称</span></view>
				<view class="t_01_3">1000</view>
			</li>
		  </block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,2,3,4,5]
			};
		}
	}
</script>

<style lang="less">
.sort{
	.head{color: #fa436a;padding: 40px 10px 30px;line-height: 20px;text-align: center;}
	.head span{font-size: 20px;padding: 0 5px;}
	.t_tou{display: flex;height: 40px;line-height: 40px;justify-content: space-between;font-size: 18px;}
	.tou_1{width: 20%;text-align: center;}
	.tou_2{width: 45%;text-align: left;}
	.t_01{display: flex;height: 50px;line-height: 50px;justify-content: space-between;font-size: 15px;}
	.t_01_1{width: 20%;text-align: center;margin-top: 8px;}
	.t_01_3{width: 20%;text-align: center;}
	.t_01_1 img{width: 30px;height: 30px;}
	.t_01_2{width: 45%;text-align: left;}
	.t_01_2 img{width: 30px;height: 30px;border-radius: 30px;margin-right: 10px;margin-top:10px;float:left;}
	.t li:nth-of-type(odd){ background-color: #EEEEEE;} 
	.t li:nth-of-type(even){background-color: #fff;} 

}
</style>
